<template>
  <b-container fluid>
    <!-- 主要内容上先配个背景图 -->
    <b-row>
      <b-container fluid class="background"></b-container>
    </b-row>
    <!-- 主要内容 -->
    <b-row>
      <b-col></b-col>
      <b-col sm="1" class="sideCard">
        <MyNavList
          :style="{ top: widthTop }"
          :class="$store.state.headerIsTop ? 'navListFixed' : ''"
        />
      </b-col>
      <b-col sm="5" style="padding: 0;max-width: 650px;">
        <MyMain />
      </b-col>
      <b-col sm="2" style="width: 280px;" class="sideCard">
        <transition appear enter-active-class="animated fadeIn">
          <div :style="{ top: widthTop }" :class="$store.state.headerIsTop ? 'avaterFixed' : ''">
            <transition enter-active-class="animated fadeInUp">
              <TimeClock v-show="showTime" />
            </transition>
            <MyAvater />
          </div>
        </transition>
      </b-col>
      <b-col></b-col>
    </b-row>
  </b-container>
</template>

<script>
import MyMain from "../main/mainPage/MyMain";
import MyAvater from "../main/mainPage/MyAvater";
import MyNavList from "../main/mainPage/MyNavList";
import TimeClock from "../main/avater/TimeClock";
export default {
  name: "MainPage",
  data() {
    return {
      // 是否固定
      isFixed: false,
      widthTop: "0",
      //...其他data
      showTime: false,
    };
  },
  components: {
    MyMain,
    MyAvater,
    MyNavList,
    TimeClock,
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll); // 监听滑动事件
  },
  destroyed() {
    window.removeEventListener("scroll", this.handleScroll); // 销毁监听滑动事件
  },
  methods: {
    handleScroll() {
      var scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      //console.log(scrollTop) // 滑动的长度
      var offsetTop = document.querySelector(".headerCard").offsetHeight;
      this.widthTop = offsetTop + 5 + "px";
      //console.log(this.$store.state.locationCard.show);

      // 吸顶效果
      if (scrollTop > offsetTop + 300) {
        this.$store.commit('setHeaderTop',true);
        this.showTime = true;
        this.$store.commit("setNavShow", false);
        this.$store.commit("setCollapsed", false);
      } else {
        this.$store.commit('setHeaderTop',false);
        this.showTime = false;
        this.$store.commit("setNavShow", true);
        this.$store.commit("setCollapsed", true);
      }
    },
  },
};
</script>

<style scoped lang="css">
.sideCard {
  padding: 0;
  margin: 0.4%;
  max-width: 300px;
}
.background {
  height: 250px;
  max-width: 100%;
  background-position: center;
  background-size: 100%;
  overflow: hidden;
  border-bottom: 10px solid rgba(114, 189, 235, 0.838);
  background-image: url("/src/assets/背景图.jpg");
}

.avaterFixed {
  position: fixed;
  /* top: 8%; */
  z-index: 4;
  width: 20%;
  width: 280px;
}
.navListFixed {
  position: fixed;
  /* top: 8%; */
  z-index: 4;
  width: 8.3%;
  max-width: 270px;
}
</style>